<template>
  <div id="message" class="message">
    <group v-if="userRole === 'renter'">
      <cell :class="{ 'red-spot': isAdd }" title="【预约消息】" inline-desc="系统动态消息推送以及预约看房消息通知等" link="/msgList/renter/1" is-link></cell>
      <cell :class="{ 'red-spot': isAdd }" title="【账单消息】" inline-desc="账户交易支付提醒通知" link="/msgListBill/renter/3" is-link></cell>
    </group>
    <group v-if="userRole === 'landlord'">
      <cell :class="{ 'red-spot': isAdd }" title="【系统消息】" inline-desc="系统动态消息推送以及预约看房消息通知等" link="/msgList/landlord/1" is-link></cell>
      <cell :class="{ 'red-spot': isAdd }" title="【账单消息】" inline-desc="账户交易支付提醒通知" link="/msgListBill/landlord/2" is-link></cell>
    </group>
  </div>
</template>
<script>
  import { Cell, Badge } from 'vux'
  export default {
    name: 'message',
    components: {
      Cell,
      Badge
    },
    data () {
      return {
        userRole: '',
        isAdd: true
      }
    },
    created () {
      this.userRole = this.$route.params.userRole
    }
  }
</script>
<style lang="less">
  .message {
    .weui-cells {
      margin-top: 0;
    }
    .red-spot {
      .vux-label {
        position: relative;
        display: inline-block;
        &:after {
          content: '';
          position: absolute;
          display: block;
          width: 6px;
          height: 6px;
          background-color: #f74c31;
          border-radius: 5px;
          right: -10px;
          top: 5px;
        }
      }
    }
  }
</style>
